<template>
  
     <div class="coltospo">
        <van-tabs v-model="active" >
            <van-tab :title="item" v-for="(item,index) in xuans" :key="item.id">
              <div class="boxtoms">
                  <div class="group" v-if="index==0">
                      <div class="item">
                          <h3><span class="iconfont icon-tianjia"></span></h3>
                          <span class="pop">创建分组</span>
                      </div>
                  </div>
                  <div class="group" v-if="index==1">
                      <div class="itemtos" v-for="(item) in caipulistpo" :key="item.id">
                          <div class="img" @click="gottodetail(item.id)">
                              <img :src="item.img" alt="">
                          </div>
                          <div class="textpo">
                              <h3><span>{{item.titleto}}</span></h3>
                              <p><span>2.0分</span><span class="iconfont icon-dian"></span><span>n人学做</span></p>
                              <div class="topl">
                                  <div class="img">
                                      <img :src="item.a.p" alt="">
                                  </div>
                                  <div class="tona">
                                      <span>{{item.a.n}}</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="groupshibi" v-if="index==2">
                      <div class="itemnote" v-for="(item) in  bijilsit" :key="item.id">
                         <div class="img" v-if="item.img" @click="grttyopp(item.id)">
                           <img :src="item.img.image" alt="">
                         </div>
                         <div class="text" v-if="item.img">
                            <span>{{item.img.name}}</span>
                         </div>
                         <div class="hot">
                           <div class="img" v-if="item.a">
                              <img :src="item.a.p" alt="">
                           </div>
                           <div class="na" v-if="item.a">
                             <span>{{item.a.n}}</span>
                           </div>
                           <div class="su">
                              <span class="iconfont icon-shoucang1" style="color:red;"></span>
                              <span>191</span>
                           </div>
                         </div>
                      </div>
                  </div>
                  <div class="groupshibi" v-if="index==3">
                      <div class="itemclass" v-for="(item) in gaunzgu" :key="item.id">
                         <div class="img" @click="getmvtovidedetail(item.id)">
                            <span class="toplp">直播回看</span>
                           <img :src="item.img" alt="">
                         </div>
                         <div class="text">
                            <span>{{item.n}}</span>
                         </div>
                         <div class="hot">
                           <div class="su">
                              <span>191</span><span>人加入学习</span>
                           </div>
                         </div>
                      </div>
                  </div>
              </div>
            </van-tab>
        </van-tabs>
         <div class="bomyuto">
            <div class="huopt3">
              <span>
                好物推荐
              </span>
            </div>
            <div class="poplists">
                  <div class="li" v-for="(item,index) in imgstos" :key="index">
                      <div class="img">
                        <span class="bao">包邮</span>
                        <img :src="item" alt="">
                        <div class="textpo">
                            <span>配料只有花生的花生酱</span>
                        </div>
                      </div>
                      <div class="textlto">
                          <span>花生酱0唐0添加高蛋白200g</span>
                      </div>
                      <div class="tel">
                        <span class="price">¥29.9</span>
                        <span class="toprice" >¥49.9</span>
                      </div>
                  </div>
              </div>
          </div>
     </div>
  
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);

export default {
    data(){
      return{
         xuans:[
           "分组",
           "菜谱",
           "笔记",
           "视频"
         ],
         active: 0,
         imgstos:[
            "https://i1.douguo.com/upload/tuan/f/f/4/300_ffc9f1ff9d61b7ec0b3e9e05ac605574.jpg",
            "https://i1.douguo.com/upload/tuan/4/d/c/300_4db79d367a7f52077e448151c7a0d41c.jpg",
            "https://i1.douguo.com/upload/tuan/4/9/1/300_499e897981b283b8393ce650884129d1.jpg",
            "https://i1.douguo.com/upload/tuan/0/4/b/300_04ca36efa227fe7fcbbabeddffa4b3fb.jpg"

          ],
          caipulistpo:[],//收藏菜谱
          gaunzgu:[],//搜藏mv
          shoucangbiji:[],//搜藏笔记
          bijilsit:[],
      }
    },
    methods:{
        gettopdf(){
             let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//搜藏mv取数据
             if(collectcooklistto){
                this.gaunzgu = collectcooklistto;
                console.log("mvpo", this.gaunzgu)
               
             }
             let collectcooklisttocaipu = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据搜藏菜谱
             if(collectcooklisttocaipu){
                // = ;
                let lsitsadd = new Set([collectcooklisttocaipu])
                  for (let e of lsitsadd) {
                      // console.log("e",typeof e )
                      // let {id,a,img,title}= e;
                      e.forEach(ele => {
                         let data ={
                            id:ele.id,
                            a:ele.a,
                            img:ele.img,
                            title:ele.title,
                            titleto:ele.titleto
                          }
                          
                          this.caipulistpo.push(data)
                          // console.log("菜谱",this.caipulistpo)
                      });
                     
                  }
             }
              let bijiIdsoucanglsit = JSON.parse(sessionStorage.getItem('bijiIdsoucanglsit'));//取数据
             if(bijiIdsoucanglsit){
                  let lsitsadd = new Set([bijiIdsoucanglsit])
                    for (let e of lsitsadd) {
                        // console.log("e", e )
                        // let {id,a,img,title}= e;
                        e.forEach(ele => {
                          let data ={
                              id:ele.id,
                              a:ele.author,
                              img:ele.share_info,
                            }  
                            this.bijilsit.push(data)
                            console.log("笔记",data)
                        });
                    }
             }
        },
          //跳到菜谱详情
        gottodetail(id){
            let detail = id;//detail   // console.log(asdto)item_id: 3160559
            console.log(id);
            console.log("detail",detail)
            window.sessionStorage.setItem('detail',JSON.stringify(detail));//存数据
            // this.$router.push('/detail')
            this.$router.push({name:"detail",params:{data:detail }})
        },
         //跳到mv详情
        getmvtovidedetail(id){
          let detailmv = id;
          console.log("detailmv",detailmv)
          window.sessionStorage.setItem('detailmv',JSON.stringify(detailmv));//存数据
          this.$router.push({name:"videdetail",params:{data:detailmv }})
          console.log(id)
        },
         //跳到笔记
        grttyopp(id){
            // this.getbijipulist.findIndex(item=>item.id==id);
            console.log(id);
            let bijiId= id;
            // this.$router.push('/bijixiangqing')
            this.$router.push({name:"bijixiangqing",params:{data:bijiId}})
            window.sessionStorage.setItem('bijiId',JSON.stringify(bijiId));//存数据
            
        },
    },
    created(){
      this.gettopdf();
    }
    
}
</script>
  
<style lang="less">
    .coltospo{
        width: 100%;
        height: 100%;
        padding-bottom: 60px;
        box-sizing: border-box;
        position:relative;
        background-color: #fafafa;
        .van-tabs__wrap{
          width: 100%;
          z-index: 99;
          position: fixed;
          top:0;
          background-color: #ffff;
        }
        .van-tabs__content{
          margin-top: 40px;
        }
        .boxtoms{
          width: 100%;
          height: 100%;
          margin-top: 5px;
          position:relative;
          background-color: #fafafa;
          .group{
            width: 100%;
            height: 100%;
            // margin-top: 20px;
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            .item{
              width: 46%;
              height: 230px;
              background-color: #ffff;
              text-align: center;
              // line-height: 230px;
              // position: relative;
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              align-items: center;
              h3{
                width: 100%;
                height: 40px;
                .iconfont{
                  display: block;
                  width: 27px;
                  height:27px;
                  text-align: center;
                  margin: auto;
                  font-size: 18px;
                  line-height: 30px;
                  border-radius: 50%;
                  background-color: #ffcb2d;
                }
              }
              span.pop{
                width: 100%;
                height: 25px;
                line-height: 20px;
                font-size:12px;
                font-weight: 600;
                color:#c7c4c4;
              }
            }
            // 菜谱
            .itemtos{
              width: 100%;
              height: 120px;
              padding-left: 10px;
              border-radius: 8px;
              display: flex;
              margin-top: 10px;
              background-color: #fff;
              padding-top: 10px;
              padding-bottom: 10px;
              box-sizing: border-box;
              // justify-items: center;
              align-items: center;
              .img{
                
                width: 40%;
                height: 100%;
                border-radius: 10px;
                overflow: hidden;
                img{
                  width: 100%;
                  
                }
              }
              .textpo{
                width: 60%;
                height: 100%;
                padding: 10px;
                display: flex;
                flex-wrap: wrap;
                justify-items: center;
                align-items: center;
                box-sizing: border-box;
                h3{
                  font-size: 14px;
                  width: 100%;
                  height: 30px;
                  line-height: 30px;
                  overflow: hidden;
                }
                p{
                  display: flex;
                  align-items: center;
                  width: 100%;
                  height: 23px;
                  overflow: hidden;
                  font-size: 10px;
                  line-height: 23px;
                  font-weight: 600;
                }
                .topl{
                  width: 100%;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  .img{
                    width: 25px;
                    height: 25px;
                    overflow: hidden;
                    border-radius: 50%;
                    margin-right: 5px;
                    img{

                      width: 100%;
                    }
                  }
                  .tona{
                    height: 100%;
                    text-align: left;
                    font-size: 14px;
                    color:#b3b3b3;
                    line-height: 30px;
                  }
                }
              }
            }
            // 笔记
            .itemnote{
              width: 50%;
              .img{
                width: 100%;
                border-radius: 10px;
                overflow: hidden;
                img{
                  width: 100%;
                }
              }
              .text{
                width: 100%;
                height: 50px;
                padding: 10px;
                padding-bottom: 5px;
                overflow: hidden;
                font-size: 14px;
                box-sizing: border-box;
              }
              .hot{
                width: 100%;
                height: 25px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .img{
                  width: 20px;
                  height: 20px;
                  overflow: hidden;
                  img{
                    width: 100%;
                  }
                }
                .na{
                  font-size: 12px;
                  color:#969696;
                }
                .su{
                  width: 25%;
                  font-size: 12px;
                   color:#969696;
                }
              }
            }
            //课程
            .itemclass{
              width: 50%;
              .img{
                width: 100%;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                .toplp{
                  position: absolute;
                  top: 5px;
                  left: 5px;
                  padding: 2px;
                  background-color: #ffcb2d;
                  border-radius: 4px;
                  font-size: 10px;
                }
                img{
                  width: 100%;
                }
              }
              .text{
                width: 100%;
                height: 30px;
                padding: 10px;
                padding-bottom: 5px;
                overflow: hidden;
                font-size: 14px;
                box-sizing: border-box;
              }
              .hot{
                width: 100%;
                height: 20px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .img{
                  width: 20px;
                  height: 20px;
                  overflow: hidden;
                  img{
                    width: 100%;
                  }
                }
                .na{
                  font-size: 12px;
                  color:#969696;
                }
                .su{
                  width: 100%;
                  font-size: 12px;
                   color:#969696;
                }
              }
            }
          }
          .groupshibi{
            width: 100%;
            height: 100%;
            // margin-top: 20px;
            padding-top: 15px;
            padding-left: 10px;
            padding-right: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content:space-between;
            box-sizing: border-box;
            .item{
              width: 45%;
              height: 230px;
              background-color: #ffff;
              text-align: center;
              // line-height: 230px;
              // position: relative;
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              align-items: center;
              h3{
                width: 100%;
                height: 40px;
                .iconfont{
                  display: block;
                  width: 27px;
                  height:27px;
                  text-align: center;
                  margin: auto;
                  font-size: 18px;
                  line-height: 30px;
                  border-radius: 50%;
                  background-color: #ffcb2d;
                }
              }
              span.pop{
                width: 100%;
                height: 25px;
                line-height: 20px;
                font-size:12px;
                font-weight: 600;
                color:#c7c4c4;
              }
            }
           
            // 笔记
            .itemnote{
              width: 48%;
              margin-top: 10px;
              background-color: #fff;
              border-radius: 8px;
              padding: 10px;
              box-sizing: border-box;
              .img{
                width: 100%;
                max-height: 80px;
                border-radius: 10px;
                overflow: hidden;
                img{
                  width: 100%;
                }
              }
              .text{
                width: 100%;
                height: 50px;
                padding: 10px;
                padding-bottom: 5px;
                overflow: hidden;
                font-size: 14px;
                box-sizing: border-box;
              }
              .hot{
                width: 100%;
                height: 25px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .img{
                  width: 20px;
                  height: 20px;
                  overflow: hidden;
                  img{
                    width: 100%;
                  }
                }
                .na{
                  font-size: 12px;
                  color:#969696;
                }
                .su{
                  width: 25%;
                  font-size: 12px;
                   color:#969696;
                }
              }
            }
            //课程
            .itemclass{
              width: 48%;
              padding: 10px;
              margin-top: 10px;
              box-sizing: border-box;
              border-radius: 8px;
              background-color: #fff;
              .img{
                width: 100%;
                border-radius: 10px;
                overflow: hidden;
                max-height: 100px;
                position: relative;
                .toplp{
                  position: absolute;
                  top: 5px;
                  left: 5px;
                  padding: 2px;
                  background-color: #ffcb2d;
                  border-radius: 4px;
                  font-size: 10px;
                }
                img{
                  width: 100%;
                }
              }
              .text{
                width: 100%;
                height: 30px;
                padding: 10px;
                padding-bottom: 5px;
                overflow: hidden;
                font-size: 14px;
                box-sizing: border-box;
              }
              .hot{
                width: 100%;
                height: 20px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .img{
                  width: 20px;
                  height: 20px;
                  overflow: hidden;
                  img{
                    width: 100%;
                  }
                }
                .na{
                  font-size: 12px;
                  color:#969696;
                }
                .su{
                  width: 100%;
                  font-size: 12px;
                   color:#969696;
                }
              }
            }
          }
        }
        .bomyuto{
          width: 100%;
          margin-top: 150px;
          .huopt3{
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            height: 25px;
            line-height: 25px;
            span{
              font-size: 16px;
            }
          }
          .poplists{
              margin-top: 10px;
              width: 100%;
              display: flex;
              justify-content: space-around;
              flex-wrap: wrap;
              .li{
                width: 45%;
                height: 285px;
                border-radius: 10px;
                overflow: hidden;
                .img{
                  width: 100%;
                  height: 190px;
                  border-radius: 10px;
                  position: relative;
                  overflow: hidden;
                  .bao{
                    position: absolute;
                    top: 8px;
                    left: 8px;
                    padding: 2px;
                    border-radius: 4px;
                    font-size: 10px;
                    background-color: #ffce46;
                  }
                  img{
                    width: 100%;
                    height: 100%;
                    margin: auto;
                  }
                  .textpo{
                    width: 100%;
                    height: 32px;
                    position: absolute;
                    bottom: 0;
                    padding: 6px;
                    box-sizing: border-box;
                    background-color: #eeeeee;
                    text-align: center;
                    span{
                      font-size: 10px;
                    }
                  }
                }
                .textlto{
                  width: 100%;
                  height: 40px;
                  text-align: left;
                  font-size: 14px;
                  overflow: hidden;
                  padding-top: 10px;
                }
                .tel{
                  width: 100%;
                  height: 30px;
                  display: flex;
                  justify-content: left;
                  align-items: center;
                  span{
                    &.price{
                      font-size: 16px;
                      margin-right: 5px;
                      color: #d8291b;
                    }
                    &.toprice{
                      font-size: 12px;
                      text-decoration:line-through;
                      color: #a5a5a5;
                    }
                  }
                }
              }
            }
        }
    }
    
</style>